<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构伪类选择器</title>
		<style type="text/css">
			/* 1、选择ul里的第一个小li */
			ul li:first-child {
				background-color: #00FF00;
			}

			/* 2、选择ul里的最后一个小li */
			/* ul li:last-child{
				background-color: #0000FF;
			} */

			/* 3、选择父元素的一个或多个特定子元素 */
			ul li:nth-child(3) {
				background-color: #00FFFF
			}

			/* 把所有偶数的孩子选出来 */
			/* ul li:nth-child(even) {
				background-color: pink;
			} */

			/* 把所有奇数的孩子选出来 */
			ul li:nth-child(odd) {
				background-color: #ffff7f;
			}

			/* 选择了所有孩子  n从0开始计算加1 */
			ol li:nth-child(n) {
				background-color: #0000FF;
			}

			/* 1、把所有偶数的孩子选出来 */
			/* ol li:nth-child(2n){} */
			/* 2、把所有奇数的孩子选出来 */
			/* ol li:nth-child(2n+1){} */
			/* 3、5n    5的倍数*/
			/* 4、n+5   从5开始到最后 */
			/* 5、-n+5  从5开始到第一个 */
			/* nth-of-type 跟nth-child的区别 ：
			     nth-of-type(){} 先指定元素在排序查找       
			*/
			section div: nth-of-type() {}
		</style>
	</head>
	<body>
		<ul>
			<li>我是第个1孩子</li>
			<li>我是第个2孩子</li>
			<li>我是第个3孩子</li>
			<li>我是第个4孩子</li>
			<li>我是第个5孩子</li>
			<li>我是第个6孩子</li>
			<li>我是第个7孩子</li>
			<li>我是第个8孩子</li>
			<li>我是第个9孩子</li>
			<li>我是第个10孩子</li>
		</ul>
		<hr>
		<ol>
			<li>我是第个1孩子</li>
			<li>我是第个2孩子</li>
			<li>我是第个3孩子</li>
			<li>我是第个4孩子</li>
			<li>我是第个5孩子</li>
			<li>我是第个6孩子</li>
			<li>我是第个7孩子</li>
			<li>我是第个8孩子</li>
			<li>我是第个9孩子</li>
			<li>我是第个10孩子</li>
		</ol>
	</body>
</html>
